<template>
 <div>
      <el-popover placement="bottom-start" width="600" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="queryData" class="demo-ruleForm" label-width="110px">
                 <el-form-item label="开始日期" style="margin-bottom: 0;">
                    <!-- <el-date-picker v-model="queryData.time" 
                    type="datetimerange"
                    style="width: 300px;" 
                    range-separator="至" 
                    start-placeholder="开始时间" 
                    end-placeholder="结束时间" 
                    align="right"
                    format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['08:30:00', '20:30:00']"
                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> -->

                    <el-date-picker
                    v-model="queryData.beginTime"
                    type="date"
                     value-format="yyyy-MM-dd"
                    placeholder="开始日期">
                    </el-date-picker>

                    <el-radio v-model="beginRadio" label="08:30:00" ch>白班</el-radio>
                    <el-radio v-model="beginRadio" label="20:30:00" style="margin-left:-10px;">晚班</el-radio>

                </el-form-item>
                <br/>
                <el-form-item label="结束日期" style="margin-bottom: 0;">

                    <el-date-picker
                    v-model="queryData.endTime"
                    type="date"
                     value-format="yyyy-MM-dd"
                    placeholder="结束日期">
                    </el-date-picker>

                    <el-radio v-model="endRadio" label="08:30:00">白班</el-radio>
                    <el-radio v-model="endRadio" label="20:30:00" style="margin-left:-10px;">晚班</el-radio>

                </el-form-item>



               <el-button type="primary" style="float:right;" @click="searchBtn">确认</el-button>
           </el-form>
              <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
    
    <div style="border:0px solid red;width:100%;margin-top:10px;height:25px;font-size:13px;">
         选择时间区间：&nbsp;&nbsp;{{queryData.beginTime + " " + beginRadio}} &nbsp;&nbsp;至&nbsp;&nbsp; {{queryData.endTime + " " + endRadio}}
    </div>
    <el-table :data="tableList" stripe border class="user-table" style="width:100%;"   :row-class-name="tableRowClassName" >
       <el-table-column fixed type="index" label="序号" sortable width="80"></el-table-column>
        <el-table-column prop="workMacName" label="机器" sortable width="110"></el-table-column>
        <el-table-column prop="gxName" label="工序" sortable width="110">
        </el-table-column>
        <el-table-column prop="okSum" label="合格品" sortable width="110"></el-table-column>
        <el-table-column prop="returnSum" label="返工品" sortable width="110"></el-table-column>
        <el-table-column prop="scrapSum" label="报废品" sortable width="110"></el-table-column>
        <el-table-column prop="okSumRate" label="合格率" sortable width="110"></el-table-column>
        <el-table-column prop="returnSumRate" label="返工率" sortable width="110"></el-table-column>
        <el-table-column prop="scrapSumRate" label="报废率" sortable width="110"></el-table-column>
    </el-table>
     
 </div>
</template>
<script>

import kzHttp from '@/axios/kzHttp.js'
export default {
    data(){
        return{
            tableList:[],
            queryData:{
                time:'',
                beginTime:'',
                endTime:'',
            },
            beginRadio: '08:30:00',
            endRadio: '08:30:00'
             }
    },
    created(){},
    mounted(){
    let  self=this;
    var date = new Date();
    var Y = date.getFullYear()+'-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
    var D = (date.getDate()<10?'0'+date.getDate():date.getDate())
    self.queryData.beginTime=Y+M+(D-1);
    self.queryData.endTime=Y+M+D;
    self.getTableList();
    },
    methods:{
        searchBtn(){
           this.getTableList();
        },
        getTableList(){
          let self =this;
        //   if(self.queryData.time!=null&&self.queryData.time.length>0){
        //       self.queryData.beginTime=self.queryData.time[0];
        //       self.queryData.endTime=self.queryData.time[1];
        //   }
        
        let beginTime_ = self.queryData.beginTime + " " + self.beginRadio;
        let endTime_ = self.queryData.endTime + " " + self.endRadio;
        
          kzHttp.getgxReportForm({ beginTime:beginTime_,endTime:endTime_}).then(res=>{
              this.tableList=res.content;
              console.log(res);
          }) 
        },
        tableRowClassName({row}){
             console.log(row.workMacName);
            if(row.workMacName === '合计'){
                return 'warning-row';
            }
        },

          timestampToTime(time) {
            if(time!=null &&time!='' ){
            var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
            var D = (date.getDate()<10?'0'+date.getDate():date.getDate() )+ ' '
            var h = (date.getHours()<10 ?'0'+date.getHours():date.getHours()) +':'
            var m = (date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes() ) + ':'
            var s = date.getSeconds() < 10 ? '0'+ date.getSeconds() : date.getSeconds()
            return Y+M+D+h+m+s
            }
            return ''
        }, 

    },
  
}
</script>
<style scoped>
 .el-table .warning-row {
 background: rgba(0,255,255, 0.5);
  }
</style>